<template>
  <div class="global">
    <el-container class="global-contain">
      <el-header>
        <div class="head">
          <div class="headtitle">Arc外卖</div>
          <div>
            <img v-if="user.avatar == null" src="../assets/logo.png" style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt="" srcset="">
            <img v-else :src="user.avatar" style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt="" srcset="">
           
            <el-dropdown>
              <span class="el-dropdown-link" style="color: #fff;">
                {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="personal()">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="updatepassword()">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></div>
        </div>
      </el-header>
      <el-container class="contain">
        <el-aside width="200px" class="aside">
          <el-menu :default-active="$route.path" router class="el-menu-demo"  >
  <el-menu-item index="/home"> <i class="el-icon-s-home menuicon" ></i>首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title"> <i class="el-icon-user menuicon"></i>信息管理</template>
    <el-menu-item index="/category">分类信息</el-menu-item>
    <el-menu-item index="/goods">商品管理</el-menu-item>
    <el-menu-item index="/banner">广告管理</el-menu-item>
    <el-menu-item index="/order">订单管理</el-menu-item>
    <el-menu-item index="/comment">评价管理</el-menu-item>
   
    
    

  </el-submenu>
  <el-submenu index="3" v-if="user.role == 'ADMIN'">
    <template slot="title"> <i class="el-icon-user menuicon"></i>用户管理</template>
    <el-menu-item index="/business">商家信息</el-menu-item>
    <el-menu-item index="/admin">管理员信息</el-menu-item>
    <el-menu-item index="/user">用户信息</el-menu-item>

  </el-submenu>
  
</el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
export default {
  data(){
    return{
      user:{}
    }
  },
  mounted(){
    this.user=JSON.parse(window.localStorage.getItem("userinfo"))
  },
  methods:{
    personal(){
      if(this.user.role == 'BUSINESS'){
     this.$router.push({
      path:"/businessPersonal"
     })
      }
    },
    updatepassword(){
      if(this.user.role == 'BUSINESS'){
     this.$router.push({
      path:"/password"
     })
      }
      
    },
    logout(){
      window.localStorage.clear()
      this.$router.push({
        path:"/"
      })
    }
  }
}
</script>
<style>
.el-table thead tr th{
  background: #f8f8f8!important;
}
.el-main{
  background: #f8f8ff !important;
}
.el-submenu__title{
  color: #fff !important;
}
.el-menu-item{
  color: #fff !important;
}
 .is-active{
background: #2bb7e5!important;
}
.el-submenu__title:hover{
  background: #2bb7e5!important;
}
.el-menu-item:hover{
  background: #2bb7e5!important;
}
.el-menu{
  width: 100%;
  height: 100%;
  background: #3691cc !important ;
}
.el-header {
  padding: 0px 20px !important;
  box-sizing: border-box;
  background: #0376bf;
}
.el-aside{
  overflow: hidden !important;

}
</style>
<style scoped>
.menuicon{
  color: #fff;
}
.contain{
  width: 100%;
  height: calc(100% - 60px);
}
.headtitle {
  font-weight: bold;
  color: #fff;
}

.head {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.global {
  width: 100%;
  height: 100%
}
.global-contain{
  width: 100%;
  height: 100%

}
.aside{
  height: 100%
}
</style>